<template>
  <div class="tab-bar">
    <van-tabbar>
      <div is="router-link" to="/home" class="item">

        <van-tabbar-item>
          <span>首页</span>
          <template #icon>
            <i class="iconfont">&#xe7a7;</i>
          </template>
        </van-tabbar-item>
      </div>

      <div is="router-link" to="/menu" class="item">
        <van-tabbar-item>
          <span>菜单</span>
          <template #icon="props">
            <i class="iconfont" v-if="props.active">&#xe777;</i>
            <i class="iconfont" v-else>&#xe6ef;</i>
          </template>
        </van-tabbar-item>
      </div>

      <div is="router-link" to="/order" class="item">
        <van-tabbar-item>
          <span>订单</span>
          <template #icon="props">
            <i class="iconfont" v-if="props.active">&#xe786;</i>
            <i class="iconfont" v-else>&#xe7b3;</i>
          </template>
        </van-tabbar-item>
      </div>

      <div is="router-link" to="/cart" class="item">
        <van-tabbar-item :badge="total">
          <span>购物车</span>
          <template #icon="props">
            <i class="iconfont" v-if="props.active">&#xe77b;</i>
            <i class="iconfont" v-else>&#xe747;</i>
          </template>
        </van-tabbar-item>
      </div>

      <div is="router-link" to="/mine" class="item">
        <van-tabbar-item>
          <span>个人中心</span>
          <template #icon="props">
            <i class="iconfont" v-if="props.active">&#xe7aa;</i>
            <i class="iconfont" v-else>&#xe7b2;</i>
          </template>
        </van-tabbar-item>
      </div>

    </van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tabbar, TabbarItem } from 'vant'
import { getTotalNum } from '@/API/gettotal'

Vue.use(Tabbar)
Vue.use(TabbarItem)

export default {
  name: 'NavBar',
  created () {
    if (getTotalNum()) {
      getTotalNum().then(res => {
        if (res) {
          this.$store.commit('updataNum', res.body.numTotal)
        } else {
          console.log(res)
        }
      }).catch(e => {
        this.$store.commit('updataNum', 0)
      })
    }
  },
  computed: {
    total () {
      const num = this.$store.getters.shopCartItemNum
      // console.log(num)
      return num === 0 ? '' : num
    }
  }
}
</script>

<style lang="scss" scoped>
  .iconfont {
    font-size: 27px;
  }
  .van-hairline--top-bottom {
    display: flex;
  }
  .van-tabbar-item--active {
    color: #646566;
  }
  .item {
    flex: 1;
  }
</style>
